<template>
  <div class="hotel-search-container">
    <h1 class="hotel-search-title">即刻入住</h1>
    <div class="hotel-search">
      <div class="destination">
        <span class="label">目的地</span>
        <input type="text" list="destinationOptions" placeholder="中国大陆及港澳台" v-model="destination" />
        <datalist id="destinationOptions">
          <option v-for="option in destinationList" :value="option" :key="option" />
        </datalist>
      </div>
      <div class="vertical_separator"></div>
      <div class="dates">
        <div class="nights-box">
          <span class="label" id="live-in">入住</span>
          <!-- <span class="nights" id="today-night">今晚入住，</span> -->
          <!-- <span class="nights">共2个夜间</span> -->
        </div>
        <div class="live_in_box">
          <input type="date" v-model="checkinDate" :min="today" :max="maxCheckinDate" />
          <span class="separator">——</span>
          <input type="date" v-model="checkoutDate" :min="minCheckoutDate" />
        </div>
      </div>
      <div class="guests">
        <span class="label">客房类型</span>
        <select v-model="guests">
          <option value="1">1成人/客房</option>
          <option value="2">2成人/客房</option>
          <option value="3">3成人/客房</option>
          <option value="4">4成人/客房</option>
        </select>
      </div>
      <button @click="searchRoom">查找酒店</button>
    </div>
  </div>
</template>

<script>
import { computed, reactive, ref } from 'vue';
import { useRouter } from 'vue-router';
import destinationList from '../module/destination/destination';
import { destinationKVList } from '../module/destination/destinationKV.js';

export default {
  setup() {
    const today = ref(new Date().toISOString().split('T')[0]);
    const checkinDate = ref('');
    const checkoutDate = ref('');
    const destination = ref('');
    const router = useRouter();
    const guests = ref('1');

    const minCheckoutDate = computed(() => {
      let date;
      if (!checkinDate.value) {
        date = new Date(today.value);
      } else {
        date = new Date(checkinDate.value);
      }
      date.setDate(date.getDate() + 1);
      return date.toISOString().split('T')[0];
    });

    const maxCheckinDate = computed(() => {
      let date;
      if (checkoutDate.value) {
        date = new Date(checkoutDate.value);
        date.setDate(date.getDate() - 1);
        return date.toISOString().split('T')[0];
      }
    });

    const searchRoom = () => {
      let dv = destination.value;
      let cid = checkinDate.value;
      let cod = checkoutDate.value;
      let gs = guests.value;
      if(dv !== "" ){
        router.push({
          path: destinationKVList[dv],
          query: {
            destination: dv,
            checkinDate: cid,
            checkoutDate: cod,
            guests: gs
          }
        });
      }else{
        alert('请选择目的地');
      }
    };

    const data = reactive({
      destinationList,
    });

    return {
      ...data,
      checkinDate,
      checkoutDate,
      minCheckoutDate,
      maxCheckinDate,
      today,
      destination,
      guests,
      searchRoom
    };
  }
};
</script>

<style scoped>
#live-in{
  margin-right: 15px;
}
.nights-box{
  display: flex;
}
.vertical_separator {
    border: 1px solid #ccc;
    height: 90px;
  }
.hotel-search-container{
  margin: 50px 120px;
}
.hotel-search-title{
  margin: 0;
  margin-left: 10px;
  margin-bottom: 10px;
}
.hotel-search {
  display: flex;
  justify-content: center;
  align-items: center;
  padding: 10px 20px 20px;
  background-color: #f5f5f5;
  border-radius: 10px;
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
  gap: 20px;
}
.destination,
.dates,
.guests,
.options {
  display: flex;
  flex-direction: column;
}
.nights{
  font-size: 15px;
  font-weight: bold;
  margin-bottom: 5px;
  vertical-align: bottom;
}
.label {
  font-size: 15px;
  font-weight: bold;
  margin-left: 5px ;
  margin-bottom: 5px;
}
input[type="text"],
input[type="date"],
select {
  padding: 10px;
  border: 1px solid #ccc;
  border-radius: 5px;
  font-size: 14px;
}
.separator {
  margin: 0 10px;
}
button {
  padding: 10px 20px;
  background-color: #000;
  color: #fff;
  border: none;
  border-radius: 5px;
  cursor: pointer;
}
button:hover {
  background-color: #333;
}
</style>
